<template>
	<view class="">
		<!-- <u-sticky> -->
			<view class="select">
				<view class="sel-content">
					<view class="con-title">
						选择日期
					</view>
					<view class="con-content" @click="dataShow = true">
						<view class="content-item">
							<view class="item-title">
								取车日期
							</view>
							<view class="item-top">
								{{start}}
							</view>
							<view class="item-bot">
								{{startweek}}
							</view>
						</view>
						<view class="content-item" style="margin-top: 40rpx;">
							{{data}}
						</view>
						<view class="content-item">
							<view class="item-title">
								还车日期
							</view>
							<view class="item-top">
								{{end}}
							</view>
							<view class="item-bot">
								{{endweek}}
							</view>
						</view>
					</view>
				</view>
				<view class="sel-time">
					<view class="time-title">
						选择时间
					</view>
					<view class="time-content">
						<view class="con-content" @click="timeShow = true">
							<view class="content-item">
								<view class="item-title">
									取车时间
								</view>
								<view class="item-top">
									{{starttime}}
								</view>
							</view>
							<view class="content-item" style="margin-top: 40rpx;">
								{{data}}
							</view>
							<view class="content-item">
								<view class="item-title">
									还车时间
								</view>
								<view class="item-top">
									{{endtime}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="today == start" class="" style="color: #db8b36;font-size: 0.9rem;text-align: center;">
					请预留两小时取车
				</view>
			</view>
		<!-- </u-sticky> -->
		<view class="content" v-for="item in boxList" :key="item.id" @click="price(item.min,item.max)">
			<view class="con-left">
				<view class="carname">
					{{item.name}}
				</view>
				<view class="carprice">
					<view class="" style="color: red;">
						￥
					</view>
					<view class="" style="color: red;font-size: 1.3rem;">
						{{item.min}}
					</view>
					<view class="">
						至
					</view>
					<view class="" style="color: red;">
						￥
					</view>
					<view class="" style="color: red;font-size: 1.3rem;">
						{{item.max}}
					</view>
				</view>
			</view>
			<view class="con-right">
				<u-lazy-load :image="http + item.thumb" img-mode="scaleToFill" height="200"></u-lazy-load>
			</view>
		</view>
		
		
		<!-- <u-calendar
			v-model="dataShow" 
			:mode="range"
			min-date="2023-09-01"
			max-date="2025-06-28"
			@change="change">
		</u-calendar> -->
		<u-select v-model="timeShow" title="取车时间 和 还车时间" mode="mutil-column" :list="timelist" @confirm="timeConfirm"></u-select>
		<u-calendar 
			v-model="dataShow" 
			:mode="range" 
			start-text="取车" 
			end-text="还车" 
			min-date="2023-09-15"
			max-date="2025-09-15"
			@change="change">
		</u-calendar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			boxFree: 0,
			dataShow: false,
			start: '',
			end: '',
			mindata: '',
			datetimerange: [],
			dataShow: false,
			timeShow: false,
			data: '至',
			start: '',//取车日期
			starttime: '00:00',//取车时间
			startweek: '',
			end: '',//还车日期
			endtime: '00:00',//还车时间
			endweek: '',
			today: '',
			type: 1,
			boxList: [],
			http: 'https://adjyxw.h1668.com',
			timelist: [
				[
					{
						value: '1',
						label: '08:00'
					},
					{
						value: '2',
						label: '10:00'
					},
					{
						value: '3',
						label: '12:00'
					},
					{
						value: '4',
						label: '14:00'
					},
					{
						value: '5',
						label: '16:00'
					},
					{
						value: '6',
						label: '18:00'
					},
					{
						value: '7',
						label: '20:00'
					},
					{
						value: '8',
						label: '22:00'
					},
					{
						value: '9',
						label: '23:00'
					}
				],
				[
					{
						value: '1',
						label: '08:00'
					},
					{
						value: '2',
						label: '10:00'
					},
					{
						value: '3',
						label: '12:00'
					},
					{
						value: '4',
						label: '14:00'
					},
					{
						value: '5',
						label: '16:00'
					},
					{
						value: '6',
						label: '18:00'
					},
					{
						value: '7',
						label: '20:00'
					},
					{
						value: '8',
						label: '22:00'
					},
					{
						value: '9',
						label: '23:00'
					}
				],
			]
		}
	},
	onLoad(options) {
		this.type = options.id
		this.getDates()
		this.getblindboxList()
	},
	methods: {
		pickerShow() {
			console.log(1)
		},
		datechange(e) {
			this.start = e[0]
			this.end = e[1]
		},
		price(min,max) {
			this.boxFree = min;
			
			if(this.start == '') {
				uni.$u.toast('请选择租赁日期');
			}else if(this.starttime == '00:00' || this.endtime == '00:00') {
				uni.$u.toast('请选择取车时间或还车时间')
			}else {
				this.confirmOrder(min,max);
			}
		},
		change(e) {
			this.start = e.startYear + '-' + e.startMonth + '-' + e.startDay
			this.startweek = e.startWeek
			this.end = e.endYear + '-' + e.endMonth + '-' + e.endDay
			this.endweek = e.endWeek
			this.data = '至'
		},
		confirmOrder(min,max) {
			let testArray = {
				start: this.start + ' ' + this.starttime,
				end: this.end + ' ' + this.endtime,
				free: this.boxFree,
				minfree: min,
				maxfree: max
			}
			
			let testStr = encodeURIComponent(JSON.stringify(testArray));
			
			uni.navigateTo({
				url: '/pagesC/confirmOrder/boxOrder?item=' + testStr
			})
		},
		timeConfirm(e) {
			this.starttime = e[0].label
			this.endtime = e[1].label
			this.orderStartdate()
		},
		orderStartdate(){
			let myDate = new Date();
			let year=myDate.getFullYear();//获取当前年
			let month=myDate.getMonth()+1;//获取当前月
			let date=myDate.getDate(); //获取当前日
			let h=myDate.getHours();       //获取当前小时数(0-23)
			let m=myDate.getMinutes();     //获取当前分钟数(0-59)
			let now= year + '-' + month + "-" + date + " " + h + ':' + m ;//当前系统时间
			let twoTime=new Date(now).getTime()+ 1*2*60*60*1000;//当前系统两小时候后的时间
			let seldata=new Date(this.start + ' ' + this.starttime).getTime();//选择的时间
			let nowdata=new Date(now).getTime();//当前时间的时间戳
			if(seldata <= nowdata){
				let date = new Date(twoTime);
				let Y = date.getFullYear() + "-";
				let M = date.getMonth()+1 +'-';
				let D = date.getDate()+' ';
				let h = date.getHours() + ":";
				let m = date.getMinutes();
				let s = date.getSeconds();
				console.log(Y + M + D + h + m) 
				this.start = Y + M + D
				this.starttime = h + m
			}
			
		},
		//获取今天和明天的日期
		getDates() {
			const today = new Date();
			const tomorrow = new Date();
			tomorrow.setDate(today.getDate() + 1);
			const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
						
			const yearToday = today.getFullYear();
			const monthToday = today.getMonth() + 1;
			const dayToday = today.getDate();
			this.today = `${yearToday}-${monthToday}-${dayToday}`;
			this.startweek = weekdays[today.getDay()];
			this.start = `${yearToday}-${monthToday}-${dayToday}`;
				
			const yearTomorrow = tomorrow.getFullYear();
			const monthTomorrow = tomorrow.getMonth() + 1;
			const dayTomorrow = tomorrow.getDate();
			this.endweek = weekdays[tomorrow.getDay()];
			this.end = `${yearTomorrow}-${monthTomorrow}-${dayTomorrow}`;
		},
		getblindboxList() {
			uni.request({
				url: uni.getStorageSync('URL') +'home/hire/hire/getblindboxList',
				method: 'POST',
				data: {
					type: this.type,
				},
				header: {
					"X-Requested-With": "XMLHttpRequest"
				},
				dataType: 'json',
				success: (res) => {
					this.boxList = res.data.data
				}
			});
		},
	}
}		
</script>

<style lang="scss">
page{
	background-color: #ffffff;
}
.select{
	background-color: #f5f3f6;
	width: 90%;
	height: auto;
	margin: 20px auto;
	padding: 15rpx;
	border-radius: 30rpx;
	// box-shadow: 0px 5px 10px 0px #2279ee;
	.sel-top {
		background-color: #fff;
		height: 70px;
		padding: 10px;
		border-radius: 30rpx;
		.top-title {
			color: #949494;
			font-size: 0.9rem;
		}
		.top-content {
			margin-top: 20rpx;
			text-align: center;
			font-size: 1.3rem;
			color: black;
		}
	}
	.sel-content {
		padding: 10px;
		margin-top: 15rpx;
		.con-title {
			color: #db8b36;
			font-size: 0.9rem;
			text-align: center;
		}
		.con-content{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			font-size: 1.3rem;
			color: black;
			.content-item {
				font-size: 1.3rem;
				color: black;
				.item-title {
					text-align: center;
					font-size: 0.9rem;
					color: #a19fa2;
				}
				.item-bot {
					text-align: center;
					font-size: 0.9rem;
					color: #a19fa2;
				}
			}
		}
	}
	.sel-time {
		padding: 10px;
		margin-top: 15rpx;
		.time-title {
			text-align: center;
			font-size: 0.9rem;
			color: #db8b36;
		}
		.time-content {
			.con-content {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				font-size: 1.3rem;
				color: black;
				.content-item {
					.item-title {
						text-align: center;
						font-size: 0.9rem;
						color: #a19fa2;
					}
				}
			}
			
		}
	}
	.sel-but {
		margin-top: 15rpx;
	}
}
.content {
	width: 90%;
	display: flex;
	padding: 10px;
	height: 290rpx;
	background-color: #f5f3f6;
	border-radius: 15px;
	margin: 50rpx auto;
	
	.con-left {
		width: 50%;
		padding: 5px;
		.carname {
			font-size: 1.1rem;
			color: black;
			// letter-spacing: 2px;
		}
		.carpeizhi {
			margin-top: 5px;
			font-size: 0.9rem;
			letter-spacing: 1px;
			color: #7b797c;
		}
		.carbiaoqian {
			display: flex;
			margin-top: 5px;
			
			.biaoqianitem {
				// font-size: 0.9rem;
				// background-color: #f8dcc7;
				// color: #d59967;
				// padding: 4px;
			}
			.biaoqianitem:not(:first-child) {
			  margin-left: 5px;
			}
		}
		.carprice {
			margin-top: 20px;
			display: flex;
			place-items: center;
		}
	}
	.con-right {
		width: 50%;
		height: 240rpx;
		padding: 10px;
		margin-top: 50rpx;
		image {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
}
</style>